<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素脱标</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            float: left;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            float: left;
        }
    </style>
</head>
<body>
<!--
浮动性质1 : 元素脱标
元素脱标的意思是,标明了浮动的元素
会脱离标准文档流
-->

<!--
box2 由于没有设置浮动,于是
box2 现在变成了标准文档流的第一个元素
而box1 从标准文档流中脱离出去,并且在另一个层面
上进行排列
-->
<div class="box1"></div>
<div class="box2"></div>

<hr>
<!--
原本不能设置宽高的 span标签,由于浮动脱离了标准文档流
并且它可以设置宽高了,实际上,宽高是html将其转换成块元素来渲染的
并且还能在一行,可以认为,浮动起来的元素 没有 行内元素和块元素这样
的分类了
-->
<span class="box3">人生只有走出来的美丽,没有等出来的辉煌</span>

</body>
</html>